<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">课程设计任务</el-breadcrumb-item>
            <el-breadcrumb-item>课程设计任务详情</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">任务详情</h2>

        <!-- 主要内容 -->
        <div style="margin: 3% 2% 3% 2%; border: 1px solid #e0e0e0; border-radius: 5px;position: relative;">


            <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">任务详情</h1>

            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="6" :offset="5">
                        <el-button type="primary" @click="openDialog">添加题目</el-button>
                    </el-col>
                </el-row>

                <!-- 对话框 -->
                <el-dialog v-model="dialogTableVisible" title="题库">
                    <div style=" width: 100%; height: 30%;">
                        <el-table @selection-change="ea" height="250" :data="taskList" style="width: 100%;">
                            <el-table-column type="selection" aria-checked="false" />
                            <el-table-column prop="taskId" label="题号" width="180" />
                            <el-table-column prop="taskName" label="题目" />
                            <!-- <el-table-column prop="scheduleId" label="发布日期" /> -->
                            <el-table-column fixed="right" label="操作">
                                <template #default="scope">
                                    <el-popover placement="right" :width="400" trigger="click">
                                        <template #reference>
                                            <el-button link type="primary" size="small">详情</el-button>
                                        </template>
                                        <h2 style="text-align: center;border-bottom: 1px solid #9e9e9e">{{
                                            scope.row.taskName }}</h2>
                                        <div style="min-height: 100px;padding: 5px;">
                                            <le-text class="mx-1" size="large" :padding="50">{{ scope.row.content
                                            }}</le-text>
                                        </div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div style="margin-top: 2%;">
                        <el-row :gutter="20" style="width: 100%;">
                            <el-col :span="2" :offset="18">
                                <el-button type="primary" @click="addTopic">添加</el-button>
                            </el-col>
                            <el-col :span="3">
                                <el-button @click="dialogTableVisible = false">取消</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </el-dialog>


                <div style="margin-top: 1%;">

                </div>
                <el-table @selection-change="selectTask" height="250" stripe :data="taskDetail" style="width: 60%;">
                    <!-- <el-table-column type="selection" aria-checked="false" /> -->
                    <el-table-column prop="taskId" label="题号" width="180" align="center"/>
                    <el-table-column prop="taskName" label="题目编号" align="center"/>
                    <!-- <el-table-column prop="scheduleId" label="发布日期" /> -->
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="scope">
                            <el-popover placement="right" :width="400" trigger="click">
                                <template #reference>
                                    <el-button link type="primary" size="small">详情</el-button>
                                </template>
                                <h2 style="text-align: center;border-bottom: 1px solid #9e9e9e">{{ scope.row.taskName }}
                                </h2>
                                <div style="min-height: 100px;padding:10px 10px 10px 10px;a background-color:#FAFAFA;">
                                    <le-text class="mx-1" size="large">{{ scope.row.content }}</le-text>
                                </div>
                            </el-popover>
                            <el-button @click="deleteTopic(scope.row.publishId)" link type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <h1 style="margin: 2% 2% 2% 2%; border-bottom: 1px solid #e0e0e0;padding-bottom: 10px;">基本信息</h1>
            <div style="display: flex; justify-content: center;text-align: center; width: 100%;">
                <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                    <el-form-item label="班级" size="large">
                        <el-input v-model="taskInfo.className" readonly="true" />
                    </el-form-item>
                    <el-form-item label="任务数" size="large">
                        <el-input v-model="taskInfo.memberMax" readonly="true" />
                    </el-form-item>
                    <el-form-item label="开始时间" size="large">
                        <el-input v-model="taskInfo.startDate" readonly="true" />
                    </el-form-item>
                    <el-form-item label="结束时间" size="large">
                        <el-input v-model="taskInfo.endDate" readonly="true" />
                    </el-form-item>
                    <el-form-item label="评分标准" size="large">
                        <el-input v-model="taskInfo.scaleRule" readonly="true" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>




            <!-- <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;"
                v-for="(item, index) in taskDetail" :key="index">
                <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="width: 60%">
                    <el-form-item label="任务题目" size="large">
                        <el-input v-model="item.taskName" readonly="true" />
                    </el-form-item>
                    <el-form-item label="任务描述" size="large">
                        <el-input v-model="item.content" type="textarea" :autosize="true" />
                    </el-form-item>
                </el-form>
            </div> -->

            <el-row :gutter="20">
                <el-col :span="6" :offset="18">
                    <el-button size="large" @click="$router.push('coursePublish')" style="margin-bottom: 5%;">返回</el-button>
                    <el-button type="danger" size="large" @click="deletePracticalTask"
                        style="margin-bottom: 5%;">删除</el-button>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import requests from '@/api/ajax';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();
const practicalId = route.query.practicalId

onBeforeMount(() => {
    // const id = $router.params.practicalId
    // if(id === 1)
    // {
    //     alert('成功')
    // }    

    const asd = requests({ url: "/inner/taskbaseVo/" + practicalId, method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        const abc = res.rdata
        taskDetail.value = abc
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });


})


//题目的共有信息
const taskInfo = ref({
    practicalId: '',
    className: '',
    memberMax: '',
    scaleRule: "",
    startDate: "",
    endDate: "",
})

//所有题目的详细信息
const taskDetail = ref([
    {
        taskId: '',
        taskName: "",
        content: "",
        taskType: "",
        publishId: '',
        startDate: "",
        endDate: "",
        scaleRule: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: "",
        practicalType: '',
        onloadDate: ""
    },
])

//题库Table
const taskList = ref([{
    taskId: '',
    taskName: '',
    content: '',
    taskType: '',
}])

taskInfo.value.practicalId = computed(() => taskDetail.value[0].practicalId)
taskInfo.value.className = computed(() => taskDetail.value[0].className)
taskInfo.value.scaleRule = computed(() => taskDetail.value[0].scaleRule)
taskInfo.value.memberMax = computed(() => taskDetail.value.length)

const startStr = computed(() => taskDetail.value[0].startDate);
taskInfo.value.startDate = computed(() => startStr.value.substring(0, 10));

const endStr = computed(() => taskDetail.value[0].endDate);
taskInfo.value.endDate = computed(() => endStr.value.substring(0, 10));

const subminStr = computed(() => taskDetail.value[0].subminTime);
taskInfo.value.subminDate = computed(() => subminStr.value.substring(0, 10));

//弹窗
let dialogTableVisible = ref(false)
//打开对话框的方法
function openDialog() {
    dialogTableVisible.value = true

    const asd = requests({ url: "/inner/taskBase", method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        const abc = res.rdata
        taskList.value = abc
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });
}

//结构后选择的内容
const courseTask = ref([
    {
        taskId: '',
        taskName: '',
        content: '',
        taskType: '',
    },
])
//checkbox

//checkbox选择后对所选内容进行解构
function selectTask(value) {
    const aa = value
    const bb = JSON.parse(JSON.stringify(aa))
    courseTask.value = bb
}

//checkbox选择后对所选内容进行解构
function ea(value) {
    const aa = value
    const bb = JSON.parse(JSON.stringify(aa))
    courseTask.value = bb
}


//添加一道题
function addTopic() {
    //给表格的内容添加新属性
    const publishtask = ref([

    ])
    for (let i = 0; i < courseTask.value.length; i++) {
        const obj = {}//每次循环创建一个新的对象
        obj.taskId = courseTask.value[i].taskId
        publishtask.value.push(obj);
        publishtask.value[i].practicalId = practicalId
        publishtask.value[i].startDate = taskInfo.value.startDate
        publishtask.value[i].endDate = taskInfo.value.endDate
        publishtask.value[i].scaleRule = taskInfo.value.scaleRule
    }

    // postCousePublish(value).then(res)
    const acd = requests({ url: "inner/addTaskbase", method: "post", data: publishtask.value }).then(res => {
        //存储用户信息到浏览器toke
        if (res.code === 20011) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            //重新获取一遍发布的题目
            const asd = requests({ url: "/inner/taskbaseVo/" + practicalId, method: "get", }).then(res => {
                //存储用户信息到浏览器toke
                const abc = res.rdata
                taskDetail.value = abc
            })
                .catch(err => {
                    console.error(err.data);
                    // 登录请求失败后的操作
                });
        } else {
            ElMessage({
                message: '发生错误',
                type: 'error',
            })
        }
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        })
}

//删除任务
function deleteTopic(publishId) {
    const acd = requests({ url: "/inner/course/" + publishId, method: "delete" }).then(res => {
        if (res.code === 20041) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })

            const asd = requests({ url: "/inner/taskbaseVo/" + practicalId, method: "get", }).then(res => {
                //存储用户信息到浏览器toke
                const abc = res.rdata
                taskDetail.value = abc
            })
                .catch(err => {
                    console.error(err.data);
                    // 登录请求失败后的操作
                });

        } else if (res.code === 20040) {
            ElMessage({
                message: res.msg,
                type: 'danger',
            })
        } else {
            ElMessage({
                message: '发生错误',
                type: 'warning',
            })
        }
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        })
}


//删除过程任务
// function deletePracticalTask() {
//     const deleteTask = requests({ url: "/inner/allCourse/" + taskInfo.value.practicalId, method: "delete" }).then(res => {
//         if (res.code === 20041) {
//             ElMessage({
//                 message: res.msg,
//                 type: 'success',
//             })
//             router.push('coursePublish')
//         } else {
//             ElMessage({
//                 message: '发生错误',
//                 type: 'warning',
//             })
//         }
//     })
//         .catch(err => {
//             console.error(err.data);
//             // 登录请求失败后的操作
//         })
// }

//删除过程任务
const deletePracticalTask = () => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            const deleteTask = requests({ url: "/inner/allCourse/" + taskInfo.value.practicalId, method: "delete" }).then(res => {
                if (res.code === 20041) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    router.push('coursePublish')
                } else {
                    ElMessage({
                        message: '发生错误',
                        type: 'warning',
                    })
                }
            })
                .catch(err => {
                    console.error(err.data);
                    // 登录请求失败后的操作
                })
        })

}


</script>